'use client'

export default function CompetitiveLandscape() {
  const competitors = [
    {
      company: 'Tapplock',
      stage: 'Early Growth / Pre-Series A',
      focus: 'Biometric smart padlocks + cloud for utilities/industrial',
      model: 'Hardware + SaaS'
    },
    {
      company: 'Assa Abloy',
      stage: 'Public (Large Cap)',
      focus: 'Mechanical/electronic locks across segments',
      model: 'Hardware + Software'
    },
    {
      company: 'Allegion',
      stage: 'Public (Large Cap)',
      focus: 'Commercial/industrial access control platforms',
      model: 'Hardware + SaaS'
    },
    {
      company: 'Dormakaba',
      stage: 'Public (Mid Cap)',
      focus: 'Integrated access management systems',
      model: 'Hardware + SaaS'
    },
    {
      company: 'Igloohome',
      stage: 'Series C / Growth',
      focus: 'Smart locks for hospitality/SME',
      model: 'Hardware + SaaS'
    },
    {
      company: 'Master Lock',
      stage: 'Mature / Private',
      focus: 'Padlocks and security hardware, expanding to smart',
      model: 'Hardware'
    }
  ]

  return (
    <div className="rec-card w-full max-w-6xl mx-auto rounded-2xl p-[16px] shadow-[0_0_20px_rgba(0,0,0,0.3)] text-gray-300">
      {/* 标题 */}
      <h2 className="text-[#9fb7ff] text-sm font-semibold uppercase tracking-wider mb-4">Competitive Landscape</h2>

      {/* 表格容器 */}
      <div className="overflow-x-auto">
        <table className="w-full border-collapse text-left text-sm">
          {/* 表头 */}
          <thead>
            <tr className="text-[#8ea2c9] bg-[#000000]/30">
              <th className="py-[20px] px-4 font-semibold">Company</th>
              <th className="py-[20px] px-4 font-semibold">Stage/Funding</th>
              <th className="py-[20px] px-4 font-semibold">Product Focus</th>
              <th className="py-[20px] px-4 font-semibold">Model</th>
            </tr>
          </thead>

          {/* 表格内容 */}
          <tbody>
            {competitors.map((item, i) => (
              <tr
                key={i}
                className="border-solid border-0 border-b border-[#1f2533] last:border-0 hover:bg-[#161b26]/40 transition-colors">
                <td className="py-[20px] px-4 font-medium text-white">{item.company}</td>
                <td className="py-[2px] px-4 text-gray-300">{item.stage}</td>
                <td className="py-[2px] px-4 text-gray-300">{item.focus}</td>
                <td className="py-[2px] px-4 text-gray-300">{item.model}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}
